<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px; margin-top: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>促销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>满减活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--<div style="margin-bottom: 20px">-->
      <!--<el-button v-show="full.setUp" @click="fullAdd" type="primary">创建满减活动</el-button>-->
    <!--</div>-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分公司" v-if="isBranch">
        <el-select v-model="formInline.branch" filterable clearable placeholder="请选择分公司">
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="分公司" v-else>-->
        <!--<el-input v-model="formInline.branch" :value="branchName"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="活动ID">
        <el-input v-model="formInline.ID"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="活动开始时间">
        <el-date-picker
          v-model="formInline.start"
          type="date"
          placeholder="选择开始日期"
          @change="startChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动结束时间">
        <el-date-picker
          v-model="formInline.end"
          type="date"
          placeholder="选择结束日期"
          @change="endChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" filterable clearable>
          <el-option
            v-for="item in statusList"
            :label="item.preSaleStateName"
            :value="item.preSaleStateCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      max-height="400"
      style="width: 100%"
      border>
      <el-table-column
        prop="id"
        show-overflow-tooltip
        label="活动ID"
        align="center"
        min-width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="活动名称"
        align="center"
        width="140">
      </el-table-column>
      <el-table-column
        prop="productNum"
        label="商品数"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="活动开始时间"
        show-overflow-tooltip
        align="center"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="活动结束时间"
        show-overflow-tooltip
        align="center"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="branchName"
        label="所属分公司"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="stateName"
        label="状态"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="280" >
        <template scope="scope">
          <el-button v-show="full.detail" v-if="scope.row.stateName !== '草稿'" @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-show="full.out" v-if="scope.row.stateName === '进行中'" @click="handle(scope.$index, scope.row, $event)" size="small">下线</el-button>
          <el-button v-show="full.edit" v-if="scope.row.stateName === '草稿'"  @click="handle(scope.$index, scope.row, $event)" size="small">编辑</el-button>
          <el-button v-show="full.check" v-if="scope.row.stateName === '创建待审核' || scope.row.stateName === '下线待审核'" @click="handle(scope.$index, scope.row, $event)" size="small">审核</el-button>
          <el-button v-show="full.delete" v-if="scope.row.stateName === '草稿'" @click="handle(scope.$index, scope.row, $event)" size="small">删除</el-button>
          <el-button v-show="full.back" v-if="scope.row.stateName === '创建待审核' || scope.row.stateName === '审核通过'" @click="handle(scope.$index, scope.row, $event)" size="small">撤回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--详情弹窗-->
    <el-dialog title="活动详情" :visible.sync="detailDialog">
      <p style="height: 1px; background: black; margin-bottom: 0px"></p>
      <div class="shuoming">
          <pre style="margin: -10px">
          分公司：{{detailData.branchName}}
          客资类型：{{detailData.userType.join(',')}}
          活动ID：{{detailData.id}}
          活动名称：{{detailData.name}}
          活动开始时间：{{detailData.startTime}}
          活动结束时间：{{detailData.endTime}}
          活动说明：{{detailData.explain}}
          满减类型：{{detailData.type}}
          <span v-show="!isStair" style="display: block; margin-left: 130px; margin-top: -20px; margin-bottom: -60px" v-for="item in detailData.rules"> 满 {{item.fullMoney}} 减 {{item.reduceMoney}}</span>
          <span v-show="isStair">阶梯：</span><span v-show="isStair" style="display: block; margin-left: 110px;" v-for="item in detailData.rules"> 满 {{item.fullMoney}} 减 {{item.reduceMoney}}</span>
          参与频次：{{detailData.joinNum}}
          创建人：{{detailData.createBy}}
          创建时间：{{detailData.createTime}}
          状态：{{detailData.state}}
          编辑人：{{detailData.editBy}}
          编辑时间：{{detailData.editTime}}
          审核人：{{detailData.auditor}}
          审核时间：{{detailData.auditTime}}
          撤回理由：{{detailData.revokeReason}}
          不通过理由：{{detailData.noPassReason}}
          </pre>
        <p style="height:1px; background:black; margin-top:0px"></p>
        <el-table
          :data="detailData.products"
          max-height="200"
          border
          style="width: 100%; margin-top: 10px">
          <el-table-column
            prop="productId"
            label="商品ID"
            align="center"
            width="">
          </el-table-column>
          <el-table-column
            prop="productName"
            label="商品名"
            align="center"
            width="">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!--审核弹窗-->
    <el-dialog
      title="审核信息"
      v-model="dialogCheck">
      <p v-if="this.audit">您确定要审核该活动吗？</p>
      <p v-else>您确定要将活动下线吗？</p>
      <span>审核状态：</span>
      <template>
        <el-radio class="radio" v-model="radio" label="1">审核通过</el-radio>
        <el-radio class="radio" v-model="radio" label="2">不通过</el-radio>
      </template>
      <el-input v-show="this.radio === '2'" style="margin-top: 20px; width: 400px; display: block" v-model="noReason" placeholder="请输入不通过理由"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCheck = false">关 闭</el-button>
        <el-button type="primary" @click="makeCheck">确 定</el-button>
      </span>
    </el-dialog>
    <!--撤回弹窗-->
    <el-dialog
      title="系统提示"
      v-model="dialogBack"
      size="tiny">
      <p style="margin-top: 20px; font-size: 16px">您确定要撤回此活动？</p>
      <el-input placeholder="请输入撤回理由" v-model="backReason"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogBack = false">取 消</el-button>
        <el-button type="primary" @click="makeBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { cms } from '../../../config/proxy.js'
//  import { mapState } from 'vuex'
  import mixins from '../../../components/mixins.vue'
//  import { apiURL } from '../../config/settings.js'
  export default {
    mixins: [mixins],
    data () {
      return {
        formInline: {
          branch: '',
          ID: '',
          name: '',
          start: '',
          end: '',
          status: ''
        },
        branchList: [],
        statusList: [],
        tableData: [],
        isLoading: false,
        total: '',
        pageSize: 10,
        page: 1,
        currentPage: '',
//      详情弹窗
        detailData: '',
        detailDialog: false,
        isStair: false,
//      审核弹窗
        audit: false,
        dialogCheck: false,
        radio: '1',
        index: '',
        rowId: '',
        noReason: '',
//      撤回弹窗
        dialogBack: false,
        backReason: ''
      }
    },
    methods: {
      fullAdd () {
        let _data = {
          menu_id: '1155',
          menu_name: '新增满减',
          per_controller: 'fullAdd'
        }
        this.$store.dispatch('addTab', _data)
      },
      startChange (val) {
        this.formInline.start = val
      },
      endChange (val) {
        this.formInline.end = val
      },
      onSubmit () {
        this.tableData = []
        this.isLoading = true
        const queryData = {
          branchId: this.branchId === 1 ? this.formInline.branch : this.branchId,
          endTime: this.formInline.end,
          page: this.page,
          pageSize: 10,
          activityId: this.formInline.ID,
          activityName: this.formInline.name,
          startTime: this.formInline.start,
          state: this.formInline.status
        }
        cms.fullList(queryData, (res) => {
          if (res.message === 'ok') {
            this.tableData = res.content.content
            this.total = res.content.count
            this.page = res.content.page
            this.isLoading = false
          } else {
            this.isLoading = false
            this.$message({
              showClose: true,
              message: '查询失败',
              type: 'error'
            })
          }
        })
      },
      handleCurrentChange (val) {
        this.page = val
        this.onSubmit()
      },
      handle (index, row, event) {
        this.rowId = row.id
        this.index = index
        const handleName = event.target.innerText
        switch (handleName) {
          case '详情':
            cms.fullDetail({id: row.id}, (res) => {
              if (res.message === 'ok') {
                this.detailData = res.content
                if (this.detailData.type === '每满') {
                  this.isStair = false
                } else {
                  this.isStair = true
                }
                if (this.detailData.joinNum === 0) {
                  this.detailData.joinNum = '不限制'
                }
                this.detailDialog = true
              } else {
                this.$message({
                  showClose: true,
                  message: '查看详情失败',
                  type: 'error'
                })
              }
            })
            break
          case '下线':
            this.$confirm('您确定要将活动下线吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
//            下线请求
              const offData = {
                id: row.id,
                editBy: this.userName
              }
              cms.fullOut(offData, (res) => {
                if (res.message === 'ok') {
                  row.stateName = '下线待审核'
                  this.$message({
                    type: 'success',
                    message: 'ok'
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: '下线请求失败!'
                  })
                }
              })
            }).catch(() => {
            })
            break
          case '审核':
            this.radio = '1'
            this.noReason = ''
            this.audit = false
            if (row.stateName === '创建待审核') {
              this.audit = true
            }
            this.dialogCheck = true
            break
          case '删除':
            this.$confirm('您确定要删除此活动？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
//            删除请求
              const Data = {
                id: row.id
              }
              cms.fullRemove(Data, (res) => {
                if (res.message === 'ok') {
                  this.onSubmit()
                  this.$message({
                    type: 'success',
                    message: 'ok'
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: '删除失败!'
                  })
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消删除'
              })
            })
            break
          case '撤回':
            this.dialogBack = true
            this.backReason = ''
            break
          case '编辑':
            let _data = {
              menu_id: '1156',
              menu_name: '编辑满减',
              per_controller: 'fullEdit',
              uid: row
            }
            this.$store.dispatch('addTab', _data)
            break
        }
      },
//    审核
      makeCheck () {
        const start = new Date(this.tableData[this.index].startTime).getTime()
        const end = new Date(this.tableData[this.index].endTime).getTime()
        const time = new Date().getTime()
//      发审核请求
        if (this.radio === '1') {
          const auditData = {
            id: this.rowId,
            auditor: this.userName
          }
          if (this.tableData[this.index].stateName === '下线待审核') {
            auditData.state = 3
          } else {
            auditData.state = 1
          }
          cms.fullCheck(auditData, (res) => {
            this.dialogCheck = false
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: 'ok'
              })
              if (this.tableData[this.index].stateName === '下线待审核') {
                this.tableData[this.index].stateName = '已下线'
              } else if (time > start && time < end) {
                this.tableData[this.index].stateName = '进行中'
              } else {
                this.tableData[this.index].stateName = '审核通过'
              }
            } else {
              this.$message({
                type: 'error',
                message: '审核失败'
              })
            }
          })
        } else {
          if (this.tableData[this.index].stateName === '下线待审核') {
            const auditData = {
              id: this.rowId,
              auditor: this.userName,
              noPassReason: this.noReason,
              state: 2
            }
            cms.fullCheckNo(auditData, (res) => {
              if (res.code === 0) {
                this.$message({
                  type: 'success',
                  message: 'ok'
                })
                this.tableData[this.index].stateName = '进行中'
                this.dialogCheck = false
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
          } else {
            const auditData = {
              id: this.rowId,
              auditor: this.userName,
              noPassReason: this.noReason,
              state: -1
            }
            cms.fullCheckNo(auditData, (res) => {
              if (res.code === 0) {
                this.$message({
                  type: 'success',
                  message: 'ok'
                })
                this.tableData[this.index].stateName = '不通过'
                this.dialogCheck = false
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
          }
        }
      },
//    撤回
      makeBack () {
        const backData = {
          id: this.rowId,
          editBy: this.userName,
          revokeReason: this.backReason
        }
        cms.fullBack(backData, (res) => {
          if (res.message === 'ok') {
            this.tableData[this.index].stateName = '草稿'
            this.$message({
              type: 'success',
              message: 'ok'
            })
            this.dialogBack = false
          } else {
            this.$message({
              type: 'error',
              message: '撤回请求失败!'
            })
            this.dialogBack = false
          }
        })
      }
    },
    computed: {
      userId: function (state) {
        return this.$store.state.user.info.userId
      },
      userName: function (state) {
        return this.$store.state.user.info.user_name
      },
      departmentId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchName
      },
      or_org_id: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      update_state: function () {
        return this.$store.state.updateState.manjianState
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.onSubmit()
      }
    },
    created () {
      console.log(this.full)
      this.detailData = {
        userType: [],
        rules: []
      }
//    分公司
      cms.getBranch({}, (res) => {
        if (res.message === 'ok') {
          this.branchList = res.content
        }
      })
//    状态
      cms.status({}, (res) => {
        if (res.message === 'ok') {
          this.statusList = res.content
        }
      })
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
